<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShadowDom测试</title>

    <style>
            .test-h1{
                background-color: blueviolet;
            }

            h1{
                border: 1px dashed red;
            }

            .test-div{
                border: 2px dashed green;
            }

            .test-div h1{
                font-size: 100px;
            }

            div{
                color: blueviolet;
            }
    </style>
</head>
<body>
    <input placeholder="请输入内容">
    <button onclick="createShadowDom()">点击创建ShadowDom</button>
    <h1 class="test-h1">外部标题</h1>
    <div id="testDiv" class="test-div"></div>
    <!-- 1.  WebComponent标准：Custom Element -->

    <!-- HTML5的网页模板，也可以使用document.document.createElement('template')创建 -->
    <template id="ttt">
        <div>
            <h1 class="test-h1">Hello ShadowDom</h1>
        </div>

        <style>
            .test-h1{
                color: red;
            }
        </style>

        <script>
            console.log(document);
            console.log(document.getElementById('testDiv'));
        </script>
    </template>
    <script>


        function createShadowDom(){
            const div = document.getElementById('testDiv');
            const shadow = div.attachShadow({mode:'open'})
            shadow.appendChild(ttt.content)
        }



    </script>
</body>
</html>
